<template>
  <div class="el-custom-from" v-loading="formLoading">
    <el-tabs v-model="activeName" class="node-tabs-kts">
      <el-tab-pane name="form">
        <template #label>
          <div>
            <span class="font_16px flow-el-tab-pane" style="padding:0 10px">
              <i class="el-icon-lx-copy"></i>
              {{ this.$t("flowi18n.flow_node_step_form") }}
            </span>
          </div>
        </template>
        <div id="From_div_style" :style="autoHeight">
          <el-container class="custom-el-main">
            <el-main id="el-custom-form-main">
              <div class="container el-card-title" :style="contentHeight">
                <el-scrollbar>
                  <div
                    class="title"
                    v-for="element in formInfo"
                    :key="element.id"
                  >
                    <el-card
                      :class="element.enable ? 'box-card' : 'box-card-danger'"
                      style="min-height:100px"
                    >
                      <template #header>
                        <div
                          :class="
                            element.enable
                              ? 'card-header'
                              : 'card-header-danger'
                          "
                        >
                          <span class="el-field-area-text">
                            <i class="el-icon-postcard"></i>
                            {{
                              $i18n.locale === "zh-cn"
                                ? element.cnName
                                : element.enName
                            }}
                          </span>
                          <el-tooltip
                            placement="right-start"
                            v-if="element.mainTable == ''"
                            effect="light"
                          >
                            <template #content>
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px;"
                                :type="element.usable ? '' : 'danger'"
                              >
                                {{ $t("formi18n.form_tables") }}：{{
                                  element.areaCNName
                                }}
                              </el-tag>
                              <br />
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px; "
                                :type="element.usable ? '' : 'danger'"
                              >
                                {{ $t("formi18n.form_tables_en") }}：{{
                                  element.areaENName
                                }}
                              </el-tag>
                              <br />
                              <el-tag
                                effect="dark"
                                size="mini"
                                style="margin-left: 5px; margin-top: 5px;"
                                :type="element.usable ? '' : 'danger'"
                              >
                                {{ $t("formi18n.form_main") }}：{{
                                  element.tableCode
                                }}
                              </el-tag>
                            </template>
                            <el-tag
                              size="mini"
                              :type="element.usable ? '' : 'danger'"
                              style="margin-left: 5px;"
                              effect="dark"
                              >{{ $t("formi18n.form_main") }}</el-tag
                            >
                          </el-tooltip>
                        </div>
                      </template>
                      <el-scrollbar style="height:200px">
                        <el-form size="mini">
                          <div
                            v-for="(item, index) in element.fields"
                            :key="index"
                          >
                            <el-col
                              :class="
                                element.enable
                                  ? 'el-field-area-close'
                                  : 'el-field-area-close-danger'
                              "
                              :style="'width:30%'"
                            >
                              <el-form-item
                                :label="
                                  $i18n.locale == 'zh-cn'
                                    ? item.fieldCNName
                                    : item.fieldENName
                                "
                                label-position="left"
                                label-width="180px"
                                :class="
                                  element.enable && item.fieldEnable
                                    ? 'el-feild-fields-item'
                                    : 'el-feild-fields-delete-item '
                                "
                              >
                                <el-checkbox
                                  style="margin-left:4px"
                                  v-model="item.choose"
                                  :label="$t('formi18n.field_write_data')"
                                  border
                                  size="mini"
                                  :disabled="
                                    !element.enable || !item.fieldEnable
                                  "
                                ></el-checkbox>
                              </el-form-item>
                            </el-col>
                          </div>
                        </el-form>
                      </el-scrollbar>
                    </el-card>
                  </div>
                </el-scrollbar>
              </div>
            </el-main>
            <el-footer>
              <div class="form_handle-box">
                <el-button
                  plain
                  type="primary"
                  @click="SaveEvent()"
                  size="mini"
                  >{{ $t("table.Global_Save") }}</el-button
                >

                <el-button
                  plain
                  type="danger"
                  @click="BackEvent()"
                  size="mini"
                  >{{ $t("table.Global_Back") }}</el-button
                >
              </div>
            </el-footer>
          </el-container>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import flowConfig from "../assets/config/model.json";
import confVue from "../utils/conf.vue";
import reqVue from "../utils/req.vue";
let windowHeight = parseInt(window.innerHeight);
export default {
  props: {
    formversionid: {
      type: Number,
      default: () => 0,
    },
    flowversionid: {
      type: Number,
      default: () => 0,
    },
    endFields: {
      type: Array,
      default: () => [],
    },
  },
  name: "flow-node-property",
  data() {
    return {
      formLoading: false,
      apipath: "flowinfo",
      way: confVue.$flowApi,
      formInfo: {},
      autoHeight: {
        height: "",
        width: "97%",
        margin: "11px",
        float: "left",
      },
      contentHeight: {
        height: "",
      },
      activeName: "form",
      conf: flowConfig.conf,
      fields: this.endFields,
    };
  },

  methods: {
    ///设置窗台的高度
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
      this.contentHeight.height = windowHeight - 200 + "px";
      this.initFields();
    },
    initFields() {
      this.formLoading = true;
      let url =
        this.apipath +
        "/v1.0/endfields/" +
        this.formversionid +
        "/" +
        this.flowversionid;
      reqVue.$Post(this.fields, url, this.way).then(
        function(data) {
          if (data.status) {
            this.formInfo = data.body;
            this.formLoading = false;
          } else {
            this.$message.error(data.message);
            this.formLoading = false;
          }
        }.bind(this)
      );
    },
    SaveEvent() {
      let complateds = [];
      this.formInfo.forEach((element) => {
        element.fields.forEach((fd) => {
          if (fd.choose) {
            complateds.push(fd);
          }
        });
      });
      this.$emit("EndNodeEvent", complateds);
    },
    BackEvent() {
      this.$emit("EndNodeEvent", null);
    }, ///初始化节点属性
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  components: {},
};
</script>
